<%@ page import="java.util.List" %>
<%@ page import="csu.web.mypetstore.domain.Item" %>
<%@ page import="csu.web.mypetstore.domain.Cart" %>
<%@ page import="csu.web.mypetstore.domain.CartItem" %>
<%@ page import="java.text.DecimalFormat" %>

<%@ include file="../common/top.jsp" %>


<div id="BackLink">
    <a href="mainFrom">Return to Main Menu</a>
</div>

<script type="text/javascript">
    let xhr;
    function changeQuality(x){
        var itemQuality = document.getElementById(x).value;
        xhr = new XMLHttpRequest();
        xhr.onreadystatechange = fun;
        xhr.open("GET", "changeItemQuality?ItemId=" + x + "&ItemQuality="+ itemQuality , true);
        xhr.send(null);
    }

    function fun(){
        let responseInfo = xhr.responseText;
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                /*responseInfo = xhr.responseText;*/
                const array = responseInfo.split("#");
                if (array[0] === "Success") {
                    /*tips.classList.add('errorTips')*/
                    if(window.Notification && Notification.permission !== "denied") {
                        Notification.requestPermission(function(status) {    // 请求权限
                            if(status === 'granted') {
                                const n = new Notification('success', {
                                    body: 'Successful modification',
                                });
                                setTimeout(function() {
                                    n.close();
                                }, 2000);
                            }
                        });
                    }
                } else if (array[0] === "fail") {
                    if(window.Notification && Notification.permission !== "denied") {
                        Notification.requestPermission(function(status) {    // 请求权限
                            if(status === 'granted') {
                                const n = new Notification('fail', {
                                    body: 'Failed',
                                });
                                setTimeout(function() {
                                    n.close();
                                }, 2000);
                            }
                        });
                    }
                }
                const ItemId = document.getElementById(array[1]+"Quantity");
                ItemId.innerText=array[2];
                const TotalPrice=document.getElementById("TotalPrice");
                TotalPrice.innerText=array[3];
            }
        }
    }
</script>

<div id="Catalog">

    <div id="Cart">

        <h2>Shopping Cart</h2>
        <form action="updateCart" method="post">
            <table>
                <tr>
                    <th><b>Item ID</b></th>
                    <th><b>Product ID</b></th>
                    <th><b>Description</b></th>
                    <th><b>In Stock?</b></th>
                    <th><b>Quantity</b></th>
                    <th><b>List Price</b></th>
                    <th><b>Total Cost</b></th>
                    <th>&nbsp;</th>
                </tr>

<%--                <c:if test="${sessionScope.cart.numberOfItems == 0}">--%>
<%--                    <tr>--%>
<%--                        <td colspan="8"><b>Your cart is empty.</b></td>--%>
<%--                    </tr>--%>
<%--                </c:if>--%>

                <%
                    Cart cart = (Cart) session.getAttribute("cart");
                    if(cart.getNumberOfItems() == 0){
                %>
                <tr>
                    <td colspan="8"><b>Your cart is empty.</b></td>
                </tr>
                <% } %>


<%--                <c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">--%>
                <%
//                    Cart cart = (Cart) session.getAttribute("cart");
                    if (cart != null && cart.getCartItems() != null) {
                        List<CartItem> cartItems = cart.getCartItemList();
                        DecimalFormat df = new DecimalFormat("$#,##0.00");
                        for (CartItem cartItem : cartItems){
                %>
                    <tr>
                        <td>
                            <a href="itemForm?itemId=<%= cartItem.getItem().getItemId()%>"><%= cartItem.getItem().getItemId()%></a>
                        </td>
                        <td><%= cartItem.getItem().getItemId()%></td>
                        <td> <%= cartItem.getItem().getAttribute1() %> <%= cartItem.getItem().getAttribute2() %>
                            <%= cartItem.getItem().getAttribute3() %> <%= cartItem.getItem().getAttribute4() %>
                            <%= cartItem.getItem().getAttribute5() %> <%= cartItem.getItem().getProduct().getName() %></td>
                        <td><%= cartItem.isInStock() ? "In Stock" : "Out of Stock" %></td>
                        <td>
                            <input type="text" name="<%= cartItem.getItem().getItemId()%>" value="<%= cartItem.getQuantity() %>">
                        </td>
<%--                        <td><fmt:formatNumber value="${cartItem.item.listPrice}"--%>
<%--                                              pattern="$#,##0.00"/></td>--%>

<%--                        <td><fmt:formatNumber value="${cartItem.total}"--%>
<%--                                              pattern="$#,##0.00"/></td>--%>
                        <td><%= df.format(cartItem.getItem().getListPrice()) %></td>
                        <td><%= df.format(cartItem.getTotal()) %></td>
                        <td>
                            <a href="removeCartItem?workingItemId=<%= cartItem.getItem().getItemId()%>" class="Button">Remove</a>
                        </td>
                    </tr>
                <%
                    }
                }
                %>


<%--                </c:forEach>--%>


<%--                <c:if test="${sessionScope.cart.numberOfItems != 0}">--%>
<%--                    <tr>--%>
<%--                        <td>Total:</td>--%>
<%--                        <td colspan="7"><span id="TotalPrice">${sessionScope.cart.total}</span></td>--%>
<%--                    </tr>--%>
<%--                </c:if>--%>
                <tr>
                    <td colspan="7">
                        Sub Total: <fmt:formatNumber value="${sessionScope.cart.subTotal}" pattern="$#,##0.00"/>
                        <input type="submit" value="Update Cart">
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </form>
        <c:if test="${sessionScope.cart.numberOfItems > 0}">
            <a href="newOrderForm" class="Button">Proceed to Checkout</a>
        </c:if>
    </div>

    <%--
    <div id="MyList">
        <c:if test="${sessionScope.loginAccount != null}">
            <c:if test="${!empty sessionScope.loginAccount.listOption}">
                 <%@ include file="includeMyList.jsp"%>
            </c:if>
        </c:if>
    </div>
    --%>

    <div id="Separator">&nbsp;</div>
</div>

<%@ include file="../common/bottom.jsp" %>